<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学员信息</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <link rel="stylesheet" href="css/commons.css">
    <style>
        #search_val {
            text-align: center;
            border-radius: 19px;
        }

        #search_area {
            position: relative;
            top: 15px;
            /* left: -80px; */
        }

        .layui-form-select dl {
            max-height: 200px;
        }

        .layui-table th {
            text-align: center;
        }

        #pagination {
            z-index: 99999;
            position: fixed;
            bottom: 30px;
        }
    </style>
    <script src="res/layui/layui.all.js"></script>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">课工场产融教学新基地</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layadmin-flexible" lay-unselect>
                <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect>
                <a href="http://www.kgc.cn" target="_blank" title="课工场">
                    <i class="layui-icon layui-icon-website"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;" layadmin-event="refresh" title="刷新">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </a>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <span id="operator"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0)" id="showOperator">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:void(0);" id="logoutBtn">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul th:each="clazz : ${session.clazzResponseText.data}" class="layui-nav layui-nav-tree"
                lay-filter="deptlist" id="deptlist">
                <li th:class="${cid == clazz.id} ? 'layui-nav-item layui-this' : 'layui-nav-item' "><a th:href="@{/data(cid=${clazz.id})}" th:text="${clazz.name}"></a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <iframe src="" class="hide" frameborder="0" id="nows" style="width:100%;height: 300px"></iframe>
            <!-- 工具条 -->
            <div class="layui-btn-container" style="margin-bottom: 30px" id="btns">
                <button class="layui-btn layui-btn-sm" id="addBtn" lay-event="add"><i class="layui-icon">&#xe608;</i> 添加
                </button>
                <button class="layui-btn layui-btn-sm" id="editBtn" lay-event="edit"><i class="layui-icon">&#xe642;</i>
                    编辑
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="delBtn" lay-event="del"><i
                        class="layui-icon">&#xe640;</i> 删除
                </button>
                <button class="layui-btn layui-btn-sm" id="infoBtn" lay-event="info"><i class="layui-icon">&#xe609;</i>
                    详情
                </button>
                <button class="layui-btn layui-btn-sm" id="echartsBtn" lay-event="echarts"><i class="layui-icon">&#xe6b2;</i>
                    图示
                </button>
            </div>
            <form class="layui-form" action="" lay-filter="search" style="margin-bottom: 30px">
                <div class="layui-form-item" id="search_area">
                    <div class="layui-input-inline">
                        <select name="cid" id="search_cid">
                            <option value="0">选择班级</option>
                            <option th:each="clazz : ${session.clazzResponseText.data}" th:value="${clazz.id}" th:text="${clazz.name}"></option>
                        </select>
                    </div>
                    <label class="layui-form-label" style="position: relative;left:50px;z-index:999"><i
                            class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-inline">
                        <input type="search" id="search_val" name="firstName" autocomplete="off" placeholder="请输入搜索姓名"
                               class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="formSearch"><i class="layui-icon">&#xe615;</i>点我一下，你就知道
                        </button>
                    </div>
                </div>
            </form>
            <script>
                layui.use(['element', 'form', 'jquery'], function () {
                    var element = layui.element,
                        form = layui.form,
                        jquery = layui.jquery;
                    form.render('select');
                });
            </script>
            <!-- 显示部门内员工简略信息列表 -->
            <table class="layui-table" lay-size="lg">
                <colgroup>
                    <col width="30">
                    <col width="90">
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th><input type="checkbox" id="isAll"></th>
                    <th>序号</th>
                    <th>曾用名</th>
                    <th>现用名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                    <th>手机号</th>
                    <th>所在班级</th>
                </tr>
                </thead>
                <tbody>
                <!--状态变量 index count size first last odd|even-->
                <tr th:each="student , filed: ${pageInfo.records}" th:switch="${student.gender}" align="center">
                    <td><input type="checkbox" class="form-check" th:value="${student.id}"></td>
                    <td th:text="${filed.count}"></td>
                    <td th:text="${student.firstName}"></td>
                    <td th:text="${student.lastName}"></td>
                    <td th:case="1" th:text="精神小伙儿"></td>
                    <td th:case="0" th:text="扒蒜老妹儿"></td>
                    <td th:text="${student.age}"></td>
                    <td th:text="${#dates.format(student.birthday, 'yyyy-MM-dd')}"></td>
                    <td th:text="${student.mobile}"></td>
                    <td th:text="${student.clazz.name}"></td>
                </tr>
                </tbody>
            </table>
            <!-- 分页导航 -->
            <div id="pagination" align="center" style="padding:20px 0px 20px 0px"></div>
        </div>
        <div class="layui-footer" style="text-align:center">
            <!-- 底部固定区域 -->
            © ekgc.cn - 课工场 - 每时每课给你薪机会
        </div>
    </div>
    <!-- 填写员工详细信息 -->
    <div style="display: none;" id="add">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend><span id="add_title"></span></legend>
        </fieldset>
        <form class="layui-form" action="" lay-filter="add">
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-inline">
                    <select name="cid" id="cid"></select>
                </div>
                <label class="layui-form-label">身份证</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" value="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">曾用名</label>
                <div class="layui-input-inline">
                    <input type="text" name="firstName" id="firstName" value="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">现用名</label>
                <div class="layui-input-inline">
                    <input type="text" name="lastName" id="lastName" value="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="authText" value="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="repassword" value="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="tel" name="mobile" value="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <!-- <button class="layui-btn layui-btn-disabled" lay-submit lay-filter="formAdd" id="formAdd" disabled>立即提交</button> -->
                    <button class="layui-btn" lay-submit lay-filter="formAdd" id="formAdd">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 显示员工详细信息 -->
    <div style="display: none;" id="info">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend><span id="add_title"></span></legend>
        </fieldset>
        <form class="layui-form" action="" lay-filter="info">
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-inline">
                    <input type="text" name="clazzName" value="" readonly autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">身份证</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" value="" readonly autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">曾用名</label>
                <div class="layui-input-inline">
                    <input type="text" name="firstName" value="" readonly autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">现用名</label>
                <div class="layui-input-inline">
                    <input type="text" name="lastName" value="" readonly autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline">
                    <input type="text" name="age" value="" readonly autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="close" lay-skin="switch" lay-text="男|女" disabled="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="mobile" value="" readonly autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="birthday" value="" readonly autocomplete="off" class="layui-input">
                </div>

            </div>
        </form>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="echarts_box" class="layui-row" style="display: none;">
        <div id="gender_box" class="layui-col-xs6" style="height:400px;">

        </div>
        <div id="computer_box" class="layui-col-xs6" style="height:400px;">

        </div>
    </div>
    <!--<img src="http://localhost:8080/qrcode/bilibili" width="900px" height="900px" style="display: none;" id="qrcode" alt="">-->


    <!-- <script src="res/jquery-3.5.1.min.js"></script> -->

    <!-- 引入 echarts.js -->
    <script src="res/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- <script src="res/commons.js"></script> -->
    <!--<script src="js/data.js"></script>-->
    <script th:inline="javascript">
        var idCardUitl = {
            getBirthday: function (idCard) {
                return idCard.substring(6, 10) + '-' + idCard.substring(10, 12) + '-' + idCard.substring(12, 14);
            },
            getAge: function (idCard) {
                let date = new Date();
                let age = date.getFullYear() - idCard.substring(6, 10) - 1;
                let month = date.getMonth() + 1;
                if (idCard.substring(10, 12) < month || idCard.substring(10, 12) == month && idCard.substring(10, 12) <= date.getDate()) {
                    age++;
                }
                return age;
            },
            getGender: function (idCard) {
                return idCard.substr(16, 1) % 2 == 1 ? 1 : 0;
            },
        };
        layui.use(['element', 'form', 'laypage', 'layer', 'jquery'], function () {
            var element = layui.element,
                laypage = layui.laypage,
                form = layui.form,
                jquery = layui.jquery,
                layer = layui.layer;
            // thymeleaf从model中获取数据
            var pageInfo = [[${pageInfo}]];
            /*分页符*/
            laypage.render({
                elem: 'pagination', //页码显示位置
                theme: '#1E9FFF', // 主题
                count: pageInfo.total,  //总条数
                limit: pageInfo.size,  //每页条数
                curr: pageInfo.current,    //当前页
                layout: ['first', 'prev', 'page', 'next', 'last', 'skip', 'limit', 'count', 'refresh'],
                page: {
                    first: '首页',
                    prev: '上一页',
                    next: '下一页',
                    last: '末页'
                },
                first: '首页',
                last: '尾页',
                groups: '5',
                limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 100],
                jump: function (obj, first) {   //跳转(obj-页面参数，first-是否第一次调用)
                    window.console.log(obj);
                    if (!first) {
                        window.location.href = '/data?cid=[[${cid}]]&page=' + obj.curr + '&limit=' + obj.limit;
                    }
                }
            });
            // 分页定位
            let x = (jquery('#pagination').parent().width() - jquery('#pagination').width()) / 2 + jquery('#deptlist').width();
            jquery('#pagination').css({"position": "fixed", "left": x});
            // 重新渲染表单
            form.render("select");

            // 触发添加按钮
            jquery('#addBtn').on('click', function (e) {
                jquery.get('/clazz/queryclazz', {}, function (clazzResponstText) {
                    layer.open({
                        type: 1,
                        content: jquery('#add'),
                        title: '添加人员',
                        area: ['660px', '380px'],
                        closeBtn: 2,
                        shadeClose: true,
                        success: function (layero, index) {
                            // 新增人员渲染部门下拉列表
                            jquery('#cid').empty();
                            jquery.each(clazzResponstText.data, function (indexInArray, valueOfElement) {
                                // 创建Option对象并赋值
                                let option = new Option(valueOfElement.name, valueOfElement.id);
                                // 向Option对象增加属性值
                                // option.setAttribute('selected', 'selected');
                                // 向页面输出
                                jquery('#cid').append(option);
                            });
                            //表单赋值
                            form.val('add', {
                                "firstName": '',
                                "lastName": '',
                                "idCard": '',
                                "authText": '123456',
                                "repassword": '123456',
                                "mobile": '',
                            });
                            // 重新渲染表单
                            form.render("select");
                            form.on('submit(formAdd)', function (data) {
                                // 按钮禁用
                                jquery('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                                deptId = data.field.cid;
                                if (deptId != 0) {
                                    jquery.ajax({
                                        type: "put",
                                        url: "/student/add",
                                        data: data.field,
                                        dataType: "json",
                                        // 发送cookie
                                        // xhrFields: {
                                        //     withCredentials: true
                                        // },
                                        // 支持ajax跨域
                                        // crossDomain: true,
                                        // 请求发送前
                                        beforeSend: function () {
                                            // 发送请求前，可以对data、url等处理
                                            layer.msg('正在提交，请稍后...', {
                                                icon: 16,
                                                shade: 0.01
                                            });
                                        },
                                        // 请求返回
                                        complete: function () {
                                            // 返回数据，根据数据调转页面等
                                        },
                                        success: function (response) {
                                            switch (response.code) {
                                                case "200":
                                                    jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                    layer.msg(response.msg, {
                                                        icon: 1
                                                    });
                                                    setTimeout(() => {
                                                        layer.close(index);
                                                        window.location.replace("/data?cid=" + deptId);
                                                    }, 1000);
                                                    break;
                                                default:
                                                    jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                    break;
                                            }
                                        }
                                    });
                                } else {
                                    layer.msg('请选择班级', {
                                        icon: 5
                                    });
                                }
                                return false;
                            });
                        }
                    });
                });
            });

            // 触发修改按钮
            jquery('#editBtn').on('click', function (e) {
                let list = new Array();
                jquery('.form-check').each(function (index, element) {
                    if (element.checked) {
                        list.push(element.value);
                    }
                });
                if (list.length > 0) {
                    let id = list[0];
                    jquery.get('/student/getStudentById/' + id, {}, function (studentResponstText) {
                        layer.open({
                            type: 1,
                            content: jquery('#add'),
                            title: '详细信息',
                            area: ['660px', '380px'],
                            closeBtn: 2,
                            shadeClose: true,
                            success: function (layero, index) {
                                let student = studentResponstText.data;
                                // 获取部门列表
                                jquery.get('/clazz/queryclazz', {}, function (clazzResponstText) {
                                    // 新增人员渲染部门下拉列表
                                    jquery('#cid').empty();
                                    jquery.each(clazzResponstText.data, function (indexInArray, valueOfElement) {
                                        // 创建Option对象并赋值
                                        let option = new Option(valueOfElement.name, valueOfElement.id);
                                        if (valueOfElement.id == student.cid) {
                                            // 向Option对象增加属性值
                                            option.setAttribute('selected', 'selected');
                                        }
                                        // 向页面输出
                                        jquery('#cid').append(option);
                                    });
                                    // 重新渲染表单
                                    form.render("select");
                                });
                                //表单赋值
                                form.val('add', {
                                    "firstName": student.firstName,
                                    "lastName": student.lastName,
                                    "idCard": student.idCard,
                                    "mobile": student.mobile,
                                    "authText": student.authText,
                                    "repassword": student.authText,
                                });

                                form.on('submit(formAdd)', function (data) {
                                    // 按钮禁用
                                    jquery('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                                    deptId = data.field.cid;
                                    if (deptId != 0) {
                                        let updateData = data.field;
                                        updateData.id = id;
                                        jquery.ajax({
                                            type: "put",
                                            url: "/student/update",
                                            data: updateData,
                                            dataType: "json",
                                            // 发送cookie
                                            // xhrFields: {
                                            //     withCredentials: true
                                            // },
                                            // 支持ajax跨域
                                            // crossDomain: true,
                                            // 请求发送前
                                            beforeSend: function () {
                                                // 发送请求前，可以对data、url等处理
                                                layer.msg('正在提交，请稍后...', {
                                                    icon: 16,
                                                    shade: 0.01
                                                });
                                            },
                                            // 请求返回
                                            complete: function () {
                                                // 返回数据，根据数据调转页面等
                                            },
                                            success: function (response) {
                                                switch (response.code) {
                                                    case "200":
                                                        jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                        layer.msg(response.msg, {
                                                            icon: 1
                                                        });
                                                        setTimeout(() => {
                                                            layer.close(index);
                                                            window.location.replace("/data?cid=" + deptId);
                                                        }, 1000);
                                                        break;
                                                    default:
                                                        jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                        break;
                                                }
                                            }
                                        });
                                    } else {
                                        layer.msg('请选择班级', {
                                            icon: 5
                                        });
                                    }
                                    return false;
                                });
                            }
                        });
                    });
                } else {
                    layer.msg('请选择要删除的员工', {icon: 2});
                }
            });

            // 触发删除按钮
            jquery('#delBtn').on('click', function (e) {
                let list = new Array();
                jquery('.form-check').each(function (index, element) {
                    if (element.checked) {
                        list.push(element.value);
                    }
                });
                if (list.length == 0) {
                    layer.msg('未选择任何数据');
                } else {
                    layer.prompt({
                        formType: 1,
                        title: '请输入密码，确认删除',
                    }, function (value, index) {
                        layer.close(index);
                        jquery.ajax({
                            type: "delete",
                            url: "/student/del/",
                            async: false,
                            contentType: 'application/json;charset=utf-8;',
                            data: JSON.stringify(list),
                            dataType: "json",
                            beforeSend: function () {
                                // 发送请求前，可以对data、url等处理
                                layer.msg('正在删除，请稍后...', {
                                    icon: 16,
                                    shade: 0.01
                                });
                            },
                            success: function (response) {
                                switch (response.code) {
                                    case '200':
                                        layer.msg(response.msg, {
                                            icon: 1
                                        });
                                        window.location.reload();
                                        break;

                                    default:
                                        layer.msg(response.msg, {
                                            icon: 5
                                        });
                                        break;
                                }
                            }
                        });
                    });
                }
            });

            // 触发详情按钮
            jquery('#infoBtn').on('click', function (e) {
                let list = new Array();
                jquery('.form-check').each(function (index, element) {
                    if (element.checked) {
                        list.push(element.value);
                    }
                });
                if (list.length > 0) {
                    jquery.get('/student/getStudentById/' + list[0], {}, function (studentResponstText) {
                        layer.open({
                            type: 1,
                            content: jquery('#info'),
                            title: '详细信息',
                            area: ['660px', '380px'],
                            closeBtn: 2,
                            shadeClose: true,
                            success: function (layero, index) {
                                let student = studentResponstText.data;

                                //表单赋值
                                form.val('info', {
                                    "clazzName": student.clazz.name,
                                    "idCard": student.idCard,
                                    "firstName": student.firstName,
                                    "lastName": student.lastName,
                                    "age": idCardUitl.getAge(student.idCard),
                                    "close": idCardUitl.getGender(student.idCard) == 1 ? true : false,
                                    "mobile": student.mobile,
                                    "birthday": idCardUitl.getBirthday(student.idCard),
                                });
                                // 重新渲染表单
                                form.render("select");
                                form.on('submit(formAdd)', function (data) {
                                    // 按钮禁用
                                    jquery('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                                    deptId = data.field.cid;
                                    if (deptId != 0) {
                                        jquery.ajax({
                                            type: "put",
                                            url: "/student/add",
                                            data: data.field,
                                            dataType: "json",
                                            // 发送cookie
                                            // xhrFields: {
                                            //     withCredentials: true
                                            // },
                                            // 支持ajax跨域
                                            // crossDomain: true,
                                            // 请求发送前
                                            beforeSend: function () {
                                                // 发送请求前，可以对data、url等处理
                                                layer.msg('正在提交，请稍后...', {
                                                    icon: 16,
                                                    shade: 0.01
                                                });
                                            },
                                            // 请求返回
                                            complete: function () {
                                                // 返回数据，根据数据调转页面等
                                            },
                                            success: function (response) {
                                                switch (response.code) {
                                                    case "200":
                                                        jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                        layer.msg(response.msg, {
                                                            icon: 1
                                                        });
                                                        setTimeout(() => {
                                                            layer.close(index);
                                                            window.location.replace("/data?cid=" + deptId);
                                                        }, 1000);
                                                        break;
                                                    default:
                                                        jquery('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                        break;
                                                }
                                            }
                                        });
                                    } else {
                                        layer.msg('请选择班级', {
                                            icon: 5
                                        });
                                    }
                                    return false;
                                });
                            }
                        });
                    });
                } else {
                    layer.msg('请选择要查看的员工', {icon: 2});
                }
            });

            // echarts图表
            jquery(('#echartsBtn')).on('click', function (e) {
                layer.open({
                    type: 1,
                    content: jquery('#echarts_box'),
                    title: '详细信息',
                    area: ['1280px', '480px'],
                    success: function (layero, index) {
                        let list = new Array();
                        jquery('.form-check').each(function (index, element) {
                            if (element.checked) {
                                list.push(element.value);
                            }
                        });
                        let cid = [[${cid}]];
                        // 班级性别百分比
                        percent('/student/queryPercent4Gender/' + cid, 'gender_box');
                        // 所有学生性别百分比
                        percent('/student/queryPercent4Gender/' + 0, 'computer_box');

                    },
                    closeBtn: 2,
                    shadeClose: true,
                });
            });

            // 百分比函数
            function percent(url, el) {
                var myChart = echarts.init(document.getElementById(el));
                /*
                    如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，
                    因此需要一个 loading 的动画来提示用户数据正在加载。
                    ECharts 默认有提供了一个简单的加载动画。
                    只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
                */
                myChart.showLoading();

                // 使用刚指定的配置项和数据显示图表。
                //  myChart.setOption(option);
                // 异步加载数据
                jquery.ajax({
                    type: "get",
                    url: url,
                    dataType: "json",
                    success: function (response) {
                        // 隐藏数据加载动画效果
                        myChart.hideLoading();
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: response.genderList
                            },
                            series: [{
                                name: '访问来源',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: response.percentList
                            }]
                        });
                    }
                });
            }

            // 输入曾用名自动填入现用名
            jquery('#firstName').keyup(function (e) {
                jquery('#lastName').val(jquery.trim(jquery('#firstName').val()));
            });

            jquery('#isAll').change(function (e) {
                if (jquery('#isAll').is(':checked')) {
                    jquery('.form-check').each(function (index, element) {
                        if (!element.checked) {
                            element.checked = true;
                        }
                    });
                } else {
                    jquery('.form-check').each(function (index, element) {
                        if (element.checked) {
                            element.checked = false;
                        }
                    });
                }
            });
            jquery('.form-check').click(function (e) {
                e.preventDefault();
            });
            jquery('tr').slice(1).click(function (e) {
                // let checkbox = $("input[type='checkbox']",this)[0];
                let checkbox = jquery("input:checkbox", this)[0];
                if (checkbox.checked) {
                    checkbox.checked = false;
                } else {
                    checkbox.checked = true;
                }
                check(jquery('.form-check'));
            })

            function check(items) {
                let flag = true;
                jquery(items).each(function (index, element) {
                    if (!element.checked) {
                        flag = false;
                    }
                });
                let isAll = window.document.querySelector(`#isAll`)
                isAll.checked = flag;
            }

        });
    </script>

</body>

</html>